<script setup lang="ts">
// 需要传入图标定位
/* defineProps<{
  name: string
  color: string
}>() */
const {
  name,
  color = '#333',
  size = 18
} = defineProps<{
  name: string
  color?: string
  size?: number
}>()
</script>

<template>
  <svg aria-hidden="true" class="svg" :style="{ fontSize: size }">
    <use :href="`#icon-${name}`" :fill="color" :color="color" />
  </svg>
</template>

<style lang="scss" scoped>
//外界使用时可以通过font-size来设置图标的大小，但是在该组件中不能通过font-size，可以使用宽高，并且使用em单位
.svg {
  width: 1em;
  height: 1em;
}
</style>
